/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity,
    RefreshControl,
    InteractionManager
} from 'react-native';
import GCStyle from '../../../Model/Global/GCStyle';
import GCComponent from '../../../Model/Global/GCComponent';
export default class Analysis extends Component {
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });
        this.state = {
            dataSource: ds,
            date_type: 'today',
        };
    }

    componentDidMount() {

    }

    rowView(data, sectionID, rowID) {
        var total_money = data.total_money;
        if (total_money == null || total_money == '') {
            total_money = 0;
        }
        return (
            <View style={styles.rowView}>
                <View style={[styles.rowView, {justifyContent: 'center'}]}>
                    <View style={styles.lineView}>
                        {GCComponent.TipIcon('始', '#62B9E1')}
                        <Text style={[styles.rowTxt, {marginLeft: 5,fontSize: 12,}]}>{data.begin_stop_name}</Text>
                    </View>
                    <View style={[styles.lineView, {marginTop: 12, justifyContent: 'space-between'}]}>
                        <View style={{flexDirection: 'row'}}>
                            {GCComponent.TipIcon('终', '#52C1A8')}
                            <Text style={[styles.rowTxt, {marginLeft: 5,fontSize: 12,}]}>{data.end_stop_name}</Text>
                        </View>
                        <View style={{flexDirection: 'row',position: 'absolute',marginLeft: GCStyle.GCPubWidth / 2 - 15,alignItems: 'center',}}>
                            <Text style={[styles.rowTxt, {fontSize: 12, marginRight: 4}]}>￥</Text>
                            <Text style={styles.rowTxt}>{total_money}</Text>
                        </View>
                        <Text style={styles.rowTxt}>{data.seat_analysis}%</Text>
                    </View>
                </View>
                <View style={[GCStyle.GCOrderCell.lineStyle, {
                    marginTop: 87
                }]}/>
            </View>
        )
    }

    onClickSection(idx) {

    }

    _renderSectionHeader() {
        return (
            <View style={{
                paddingRight: 18,
                paddingLeft: 23,
                alignItems: 'center',
                backgroundColor: 'white',
                width: GCStyle.GCPubWidth,
                height: 38,
                flexDirection: 'row',
                justifyContent: 'space-around'
            }}>

                {this.sectionHeaderView('线路', 0)}
                {this.sectionHeaderView('路线收支', 1)}
                {this.sectionHeaderView('上座率', 2)}
                <View style={[GCStyle.GCOrderCell.lineStyle, {
                    marginTop: 87,
                    position: 'absolute',
                }]}/>
            </View>
        );
    }

    onClickSection(index) {

    }

    sectionHeaderView(sectionConten, index) {
        var align;
        if (index === 0) align = 'flex-start';
        if (index === 1) align = 'center';
        if (index === 2) align = 'flex-end';

        return (
            <TouchableOpacity style={{flex: 1,}}
                              activeOpacity={8}
                              onPress={() => this.onClickSection(index)}>
                <Text style={{alignSelf: align, paddingLeft: 3, paddingRight: 3, color: 'black'}}>{sectionConten}</Text>

            </TouchableOpacity>
        )
    }


    render() {

        const {data} = this.props;
        return (
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.dataSource.cloneWithRows(data)}
                    renderSectionHeader={(data, sectionId) => this._renderSectionHeader(data, sectionId)}
                    enableEmptySections={true}
                    renderRow={(dataname, sectionID, rowID) => this.rowView(dataname, sectionID, rowID)}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.props.refreshing()}
                            onRefresh={() => this.props.refreshData()}
                        />
                    }
                    onEndReachedThreshold={50}
                    onEndReached={() => {
                        this.props.loadMoreData()
                    }}
                />
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    rowView: {
        height: 88,
        width: GCStyle.GCPubWidth,
        paddingRight: 23,
        backgroundColor: 'white'
    },
    lineView: {
        flexDirection: 'row',
        marginLeft: 8,
    },
    rowTxt: {
        marginLeft: -5,
        fontSize: 14,
        color: '#989898'
    }
});

